<template>
  <view class="zgjm-wrapper" v-if="isShowMsg == 'Y'">
    <view class="top">
      <tui-input type="number" label="小六壬" placeholder="请输入任意数字" trim v-model="shuzi">
        <template v-slot:right>
          <tui-form-button height="30px" width="80px" background="#c09351" @click="handerBtn">测算</tui-form-button>
        </template>
      </tui-input>
    </view>
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />

    <view class="center"></view>

    <view class="bottom" v-if="dataList.guaming">
      <scroll-view>
        <tui-card
          v-show="key!='卦曰' && key!='解曰' && key!='凶吉'"
          :title="{'text':key}"
          full
          class="tul-card"
          :key="index"
          :image="imgs[key]"
          v-for="(ls,key,index) in dataList.description"
        >
          <template v-slot:body>
            <view class="tui-default">{{ls}}</view>
          </template>
        </tui-card>
      </scroll-view>
    </view>

    <tui-toast ref="toast"></tui-toast>
  </view>
</template>

<script>
import { yfgxiaoliurengApi } from "@/apis/qiuqian";
import showPage from '@/utils/showPage'


export default {
  mixins: [showPage],

  data() {
    return {

      shuzi: "",
      dataList: {},
      imgs: {
        运势: {
          url: "/static/imgs/liuren/yunshi.png",
          width: 40,
          height: 40,
          circle: true
        },
        感情: {
          url: "/static/imgs/liuren/ganqing.png",
          width: 40,
          height: 40,
          circle: true
        },
        事业: {
          url: "/static/imgs/liuren/shiye.png",
          width: 40,
          height: 40,
          circle: true
        },
        财富: {
          url: "/static/imgs/liuren/caifu.png",
          width: 40,
          height: 40,
          circle: true
        },
        身体: {
          url: "/static/imgs/liuren/jiankang.png",
          width: 40,
          height: 40,
          circle: true
        },
        神鬼: {
          url: "/static/imgs/liuren/shengui.png",
          width: 40,
          height: 40,
          circle: true
        },
        行人: {
          url: "/static/imgs/liuren/xingren.png",
          width: 40,
          height: 40,
          circle: true
        }
      }
    };
  },
  onShow(){
    
  },
  methods: {
 
    async handerBtn() {
      if (this.shuzi) {
        let { code, data, msg } = await yfgxiaoliurengApi({
          shuzi: this.shuzi
        });
        if (code == 1) {
          this.dataList = data;
          if (data.length) {
            this.card = data[0];
          }
        } else {
          let params = {
            title: msg
          };
          this.$refs.toast && this.$refs.toast.show(params);
        }
      } else {
        let params = {
          title: "请输入数字"
        };
        this.$refs.toast && this.$refs.toast.show(params);
      }
    }
  }
};
</script>


<style lang="scss">
.zgjm-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  position: relative;
  overflow: hidden;
  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .top {
    position: relative;
    z-index: 2;
  }
  .bottom {
    flex-grow: 1;
    padding: 10px 10px 10px 10px;

    display: flex;
    flex-direction: column;
    overflow: auto;
    .tul-card {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
      margin-bottom: 10px;
    }
    .tui-card-header {
      // display: none !important;
    }
    .tui-default {
      padding: 10px 0 10px 10px;
      overflow: auto;
    }
  }
}
</style>